<template>
	<view class="content" :style="{background:$store.state.bgPrimaryColor}">
		<view class="navBody">
			<view v-for="(item,index) in navs" :key="index"
				:style="{'border-bottom':index !== 8 ? '1px solid #e3e3e3' : '1px solid #fff'}" class="view">
				<text>{{item.name}}</text>
				<view @click="upload" v-if="item.name == '头像'">
					<u--image :showLoading="true" :src="item.model" width="70rpx" height="70rpx" radius="0"
						v-if="item.model" shape="circle"></u--image>
					<input type="text" :placeholder="item.placeholder" v-model="item.model" :disabled="true"
						style="pointer-events: none;" v-else />
					<image src="../../static/more.png"></image>
				</view>
				<view @click="ShowPicker(index)" v-else-if="item.name == '省市地址'">
					<addressList @region="region"></addressList>
					<image src="../../static/more.png"></image>
				</view>
				<view @click="ShowPicker(index)" v-else>
					<input type="text" :placeholder="item.placeholder" v-model="item.model" :disabled="item.disabled" />
					<image src="../../static/more.png"></image>
				</view>
			</view>
		</view>
		<button :style="{'background':$store.state.buttonColor}" @click="profile" v-if="type == 'edit'">修改</button>
		<u-picker :show="show" :columns="columns" keyName="label" @cancel="show = false" @confirm="confirm"></u-picker>
		<u-datetime-picker :show="ISshow" v-model="value1" mode="date" @cancel="ISshow = false"
			@confirm="datetime"></u-datetime-picker>
	</view>
</template>
<script>
	import {
		profile,
		userinfo,
	} from '../../api/Mine.js';
	import addressList from '../../components/address/index.vue';
	export default {
		components: {
			addressList
		},
		data() {
			return {
				show: false,
				ISshow: false,
				value1: Number(new Date()),
				columns: [
					[{
						label: '男',
						id: 1
					}, {
						label: '女',
						id: 2
					}]
				],
				navs: [{
					name: '头像',
					placeholder: '请选择头像',
					model: '',
					disabled: true,
				}, {
					name: '英文名',
					placeholder: '请输入英文名',
					model: '',
					disabled: false,
				}, {
					name: '手机号',
					placeholder: '请输入手机号',
					model: '',
					disabled: false,
				}, {
					name: '性别',
					placeholder: '请选择性别',
					model: '',
					disabled: true,
				}, {
					name: '生日',
					placeholder: '请选择生日',
					model: '',
					disabled: true,
				}, {
					name: '身份证号',
					placeholder: '请输入身份证号',
					model: '',
					disabled: false,
				}, {
					name: '省市地址',
					placeholder: '请选择省市地址',
					model: '',
					disabled: true,
				}, {
					name: '详细地址',
					placeholder: '请输入详细地址',
					model: '',
					disabled: false,
				}, {
					name: '邮箱',
					placeholder: '请输入邮箱',
					model: '',
					disabled: false,
				}],
				req: {
					username: '', //昵称
					avatar: '', //头像
					gender: '', //性别，0未知，1男，2女
					id_card: '', //身份证
					address: '', //详细地址
					email: '', //邮箱
					province_city_path: '', //省市区路径id，多个用英文逗号隔开
				},
				items: [],
				type: '', //edit编辑
			}
		},
		onLoad(options) {
			this.type = options.type;
			if (this.type !== 'edit') {
				for (var i = 0; i < this.navs.length; i++) {
					this.navs[i].disabled = true;
					this.navs[i].placeholder = '空';
				}
			}
			this.userinfo();
		},
		methods: {
			region(e) {
				this.navs[6].model = e.addressName.join('-');
				this.req.province_city_path = e.addressId.join(',');
			},
			upload() {
				const _this = this;
				uni.chooseImage({
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: 'https://yuekeapi.worldtalker.cn/api/upload/upload', //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								_this.navs[0].model = JSON.parse(uploadFileRes.data).data.http_url;
								// console.log(JSON.parse(uploadFileRes.data).data.http_url);
							}
						});
					}
				});
			},
			ShowPicker(index = null) {
				switch (index) {
					case 3:
						this.show = true;
						break;
					case 4:
						this.ISshow = true;
						break;
				}
			},
			/**
			@method 获取用户信息
			**/
			async userinfo() {
				try {
					const res = await userinfo();
					this.req = {
						...res.data.userinfo
					};
					this.navs[0].model = res.data.userinfo.avatar;
					this.navs[1].model = res.data.userinfo.username;
					this.navs[2].model = res.data.userinfo.mobile;
					this.navs[3].model = res.data.userinfo.gender == 0 ? '未知' : res.data.userinfo.gender == 1 ? '男' :
						'女';
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/** 
			@method 修改用户信息
			**/
			async profile() {
				try {
					this.req = {
						...this.req,
						...{
							username: this.navs[1].model, //昵称
							avatar: this.navs[0].model, //头像
							gender: this.navs[3].model == '男' ? 1 : 2, //性别，0未知，1男，2女
							id_card: this.navs[5].model, //身份证
							address: this.navs[7].model, //详细地址
							email: this.navs[8].model, //邮箱
						}
					};
					let pattern = /^[A-Za-z0-9]+$/;
					let isValid = pattern.test(this.req.username);
					if (isValid) {
						console.log("字符串只包含英文和数字");
					} else {
						uni.showToast({
							title: '用户名只能输入英文或者数字！',
							icon: 'none',
							duration: 2000
						});
						return false;
					}
					const res = await profile(this.req);
					uni.showToast({
						title: '修改成功！',
						icon: 'none',
						duration: 2000
					});
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			confirm(e) {
				this.navs[3].model = e.value[0].label;
				this.req = {
					...this.req,
					...{
						gender: e.value[0].id
					}
				};
				this.show = false;
			},
			timestampToYMD(timestamp) {
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = ("0" + (date.getMonth() + 1)).slice(-2); // 月份从0开始，因此要加1
				const day = ("0" + date.getDate()).slice(-2);
				return year + "-" + month + "-" + day;
			},
			datetime(e) {
				this.navs[4].model = this.timestampToYMD(e.value);
				this.ISshow = false;
			}
		}
	}
</script>

<style scoped lang="less">
	button::after {
		border: none;
	}

	.content {
		padding-top: 30px;
		height: 100vh;

		.navBody {
			width: 80%;
			border-radius: 20rpx;
			margin: 0px auto;
			padding: 20rpx 50rpx 20rpx 50rpx;
			background-color: #fff;

			input {
				text-align: right;
			}

			.view {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 30rpx;
				padding-top: 30rpx;

				view {
					display: flex;
					align-items: center;
				}

				text {
					font-weight: 500;
					font-size: 29rpx;
				}

				image {
					width: 45rpx;
					height: 45rpx;
				}
			}
		}

		button {
			width: 50%;
			margin: 0px auto;
			border-radius: 50rpx;
			height: 70rpx;
			color: #fff;
			margin-top: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #fe8810;
			font-size: 28rpx;
			letter-spacing: 2rpx;
		}
	}
</style>